<template>
  <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="{ path: item.path }"><c-i18n>{{ item.meta.title }}</c-i18n></el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const breadcrumbList = computed(() => {
  // 第一项取出来做一个判断，是不是dashboard，如果不是的话会把第一项加入dashboard路由，加入完和后面进行相连, 过滤启用面包屑的路由，默认为启用
  const matchedList: any[] = route.matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
  if (matchedList.length > 0 && matchedList[0].name !== 'home') {
    matchedList.unshift({
      path: '/dashboard/home',
      meta: { title: '首页' }
    })
  }
  return matchedList
})
</script>

<style lang="scss" scoped></style>
